$(function() {
    i();
    j();
    n();
    k();
    l();
    m();
    o();
    p();

    function i() {
        var a = echarts.init(document.getElementById("echart1"));
        option = {
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "shadow"
                }
            },
            grid: {
                left: "0%",
                top: "10px",
                right: "0%",
                bottom: "4%",
                containLabel: true
            },
            xAxis: [{
                type: "category",
                data: ["商超门店", "教育培训", "房地产", "生活服务", "汽车销售", "旅游酒店", "五金建材"],
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 1,
                        type: "solid"
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    interval: 0,
                    show: true,
                    splitNumber: 15,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: "12",
                    },
                },
            }],
            yAxis: [{
                type: "value",
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: "12",
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1	)",
                        width: 1,
                        type: "solid"
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                    }
                }
            }],
            series: [{
                type: "bar",
                data: [200, 300, 300, 900, 1500, 1200, 600],
                barWidth: "35%",
                itemStyle: {
                    normal: {
                        color: "#2f89cf",
                        opacity: 1,
                        barBorderRadius: 5,
                    }
                }
            }]
        };
        a.setOption(option);
        window.addEventListener("resize", function() {
            a.resize()
        })
    }

    function j() {
        var a = echarts.init(document.getElementById("echart2"));
        option = {
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "shadow"
                }
            },
            grid: {
                left: "0%",
                top: "10px",
                right: "0%",
                bottom: "4%",
                containLabel: true
            },
            xAxis: [{
                type: "category",
                data: ["浙江", "上海", "江苏", "广东", "北京", "深圳", "安徽"],
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 1,
                        type: "solid"
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    interval: 0,
                    show: true,
                    splitNumber: 15,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: "12",
                    },
                },
            }],
            yAxis: [{
                type: "value",
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: "12",
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1	)",
                        width: 1,
                        type: "solid"
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                    }
                }
            }],
            series: [{
                type: "bar",
                data: [1500, 1200, 600, 200, 300, 300, 900],
                barWidth: "35%",
                itemStyle: {
                    normal: {
                        color: "#27d08a",
                        opacity: 1,
                        barBorderRadius: 5,
                    }
                }
            }]
        };
        a.setOption(option);
        window.addEventListener("resize", function() {
            a.resize()
        })
    }

    function o() {
        var a = echarts.init(document.getElementById("echart5"));
        option = {
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "shadow"
                }
            },
            grid: {
                left: "0%",
                top: "10px",
                right: "0%",
                bottom: "2%",
                containLabel: true
            },
            xAxis: [{
                type: "category",
                data: ["浙江", "上海", "江苏", "广东", "北京", "深圳", "安徽", "四川"],
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 1,
                        type: "solid"
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    interval: 0,
                    show: true,
                    splitNumber: 15,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: "12",
                    },
                },
            }],
            yAxis: [{
                type: "value",
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: "12",
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1	)",
                        width: 1,
                        type: "solid"
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                    }
                }
            }],
            series: [{
                type: "bar",
                data: [2, 3, 3, 9, 15, 12, 6, 4, 6, 7, 4, 10],
                barWidth: "35%",
                itemStyle: {
                    normal: {
                        color: "#2f89cf",
                        opacity: 1,
                        barBorderRadius: 5,
                    }
                }
            }]
        };
        a.setOption(option);
        window.addEventListener("resize", function() {
            a.resize()
        })
    }

    function n() {
        var a = echarts.init(document.getElementById("echart4"));
        option = {
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    lineStyle: {
                        color: "#dddc6b"
                    }
                }
            },
            legend: {
                top: "0%",
                data: ["安卓", "IOS"],
                textStyle: {
                    color: "rgba(255,255,255,.5)",
                    fontSize: "12",
                }
            },
            grid: {
                left: "10",
                top: "30",
                right: "10",
                bottom: "10",
                containLabel: true
            },
            xAxis: [{
                type: "category",
                boundaryGap: false,
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: 12,
                    },
                },
                axisLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.2)"
                    }
                },
                data: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24"]
            }, {
                axisPointer: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                position: "bottom",
                offset: 20,
            }],
            yAxis: [{
                type: "value",
                axisTick: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)"
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: 12,
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)"
                    }
                }
            }],
            series: [{
                name: "安卓",
                type: "line",
                smooth: true,
                symbol: "circle",
                symbolSize: 5,
                showSymbol: false,
                lineStyle: {
                    normal: {
                        color: "#0184d5",
                        width: 2
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: "rgba(1, 132, 213, 0.4)"
                        }, {
                            offset: 0.8,
                            color: "rgba(1, 132, 213, 0.1)"
                        }], false),
                        shadowColor: "rgba(0, 0, 0, 0.1)",
                    }
                },
                itemStyle: {
                    normal: {
                        color: "#0184d5",
                        borderColor: "rgba(221, 220, 107, .1)",
                        borderWidth: 12
                    }
                },
                data: [3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4, 3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4]
            }, {
                name: "IOS",
                type: "line",
                smooth: true,
                symbol: "circle",
                symbolSize: 5,
                showSymbol: false,
                lineStyle: {
                    normal: {
                        color: "#00d887",
                        width: 2
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: "rgba(0, 216, 135, 0.4)"
                        }, {
                            offset: 0.8,
                            color: "rgba(0, 216, 135, 0.1)"
                        }], false),
                        shadowColor: "rgba(0, 0, 0, 0.1)",
                    }
                },
                itemStyle: {
                    normal: {
                        color: "#00d887",
                        borderColor: "rgba(221, 220, 107, .1)",
                        borderWidth: 12
                    }
                },
                data: [5, 3, 5, 6, 1, 5, 3, 5, 6, 4, 6, 4, 8, 3, 5, 6, 1, 5, 3, 7, 2, 5, 1, 4]
            }, ]
        };
        a.setOption(option);
        window.addEventListener("resize", function() {
            a.resize()
        })
    }

    function p() {
        var b = echarts.init(document.getElementById("echart6"));
        var a = {
            normal: {
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
            }
        };
        var c = {
            normal: {
                color: "rgba(255,255,255,.05)",
                label: {
                    show: false,
                },
                labelLine: {
                    show: false
                }
            },
            emphasis: {
                color: "rgba(0,0,0,0)"
            }
        };
        option = {
            color: ["#0f63d6", "#0f78d6", "#0f8cd6", "#0fa0d6", "#0fb4d6"],
            tooltip: {
                show: true,
                formatter: "{a} : {c} "
            },
            legend: {
                itemWidth: 10,
                itemHeight: 10,
                itemGap: 12,
                bottom: "3%",
                data: ["浙江", "上海", "广东", "北京", "深圳"],
                textStyle: {
                    color: "rgba(255,255,255,.6)",
                }
            },
            series: [{
                name: "浙江",
                type: "pie",
                clockWise: false,
                center: ["50%", "42%"],
                radius: ["59%", "70%"],
                itemStyle: a,
                hoverAnimation: false,
                data: [{
                    value: 80,
                    name: "01"
                }, {
                    value: 20,
                    name: "invisible",
                    tooltip: {
                        show: false
                    },
                    itemStyle: c
                }]
            }, {
                name: "上海",
                type: "pie",
                clockWise: false,
                center: ["50%", "42%"],
                radius: ["49%", "60%"],
                itemStyle: a,
                hoverAnimation: false,
                data: [{
                    value: 70,
                    name: "02"
                }, {
                    value: 30,
                    name: "invisible",
                    tooltip: {
                        show: false
                    },
                    itemStyle: c
                }]
            }, {
                name: "广东",
                type: "pie",
                clockWise: false,
                hoverAnimation: false,
                center: ["50%", "42%"],
                radius: ["39%", "50%"],
                itemStyle: a,
                data: [{
                    value: 65,
                    name: "03"
                }, {
                    value: 35,
                    name: "invisible",
                    tooltip: {
                        show: false
                    },
                    itemStyle: c
                }]
            }, {
                name: "北京",
                type: "pie",
                clockWise: false,
                hoverAnimation: false,
                center: ["50%", "42%"],
                radius: ["29%", "40%"],
                itemStyle: a,
                data: [{
                    value: 60,
                    name: "04"
                }, {
                    value: 40,
                    name: "invisible",
                    tooltip: {
                        show: false
                    },
                    itemStyle: c
                }]
            }, {
                name: "深圳",
                type: "pie",
                clockWise: false,
                hoverAnimation: false,
                center: ["50%", "42%"],
                radius: ["20%", "30%"],
                itemStyle: a,
                data: [{
                    value: 50,
                    name: "05"
                }, {
                    value: 50,
                    name: "invisible",
                    tooltip: {
                        show: false
                    },
                    itemStyle: c
                }]
            }, ]
        };
        b.setOption(option);
        window.addEventListener("resize", function() {
            b.resize()
        })
    }

    function k() {
        var a = echarts.init(document.getElementById("fb1"));
        option = {
            title: [{
                text: "年龄分布",
                left: "center",
                textStyle: {
                    color: "#fff",
                    fontSize: "16"
                }
            }],
            tooltip: {
                trigger: "item",
                formatter: "{a} <br/>{b}: {c} ({d}%)",
                position: function(b) {
                    return [b[0] + 10, b[1] - 10]
                }
            },
            legend: {
                top: "70%",
                itemWidth: 10,
                itemHeight: 10,
                data: ["0岁以下", "20-29岁", "30-39岁", "40-49岁", "50岁以上"],
                textStyle: {
                    color: "rgba(255,255,255,.5)",
                    fontSize: "12",
                }
            },
            series: [{
                name: "年龄分布",
                type: "pie",
                center: ["50%", "42%"],
                radius: ["40%", "60%"],
                color: ["#065aab", "#066eab", "#0682ab", "#0696ab", "#06a0ab", "#06b4ab", "#06c8ab", "#06dcab", "#06f0ab"],
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                data: [{
                    value: 1,
                    name: "0岁以下"
                }, {
                    value: 4,
                    name: "20-29岁"
                }, {
                    value: 2,
                    name: "30-39岁"
                }, {
                    value: 2,
                    name: "40-49岁"
                }, {
                    value: 1,
                    name: "50岁以上"
                }, ]
            }]
        };
        a.setOption(option);
        window.addEventListener("resize", function() {
            a.resize()
        })
    }

    function l() {
        var a = echarts.init(document.getElementById("fb2"));
        option = {
            title: [{
                text: "职业分布",
                left: "center",
                textStyle: {
                    color: "#fff",
                    fontSize: "16"
                }
            }],
            tooltip: {
                trigger: "item",
                formatter: "{a} <br/>{b}: {c} ({d}%)",
                position: function(b) {
                    return [b[0] + 10, b[1] - 10]
                }
            },
            legend: {
                top: "70%",
                itemWidth: 10,
                itemHeight: 10,
                data: ["电子商务", "教育", "IT/互联网", "金融", "学生", "其他"],
                textStyle: {
                    color: "rgba(255,255,255,.5)",
                    fontSize: "12",
                }
            },
            series: [{
                name: "年龄分布",
                type: "pie",
                center: ["50%", "42%"],
                radius: ["40%", "60%"],
                color: ["#065aab", "#066eab", "#0682ab", "#0696ab", "#06a0ab", "#06b4ab", "#06c8ab", "#06dcab", "#06f0ab"],
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                data: [{
                    value: 5,
                    name: "电子商务"
                }, {
                    value: 1,
                    name: "教育"
                }, {
                    value: 6,
                    name: "IT/互联网"
                }, {
                    value: 2,
                    name: "金融"
                }, {
                    value: 1,
                    name: "学生"
                }, {
                    value: 1,
                    name: "其他"
                }, ]
            }]
        };
        a.setOption(option);
        window.addEventListener("resize", function() {
            a.resize()
        })
    }

    function m() {
        var a = echarts.init(document.getElementById("fb3"));
        option = {
            title: [{
                text: "兴趣分布",
                left: "center",
                textStyle: {
                    color: "#fff",
                    fontSize: "16"
                }
            }],
            tooltip: {
                trigger: "item",
                formatter: "{a} <br/>{b}: {c} ({d}%)",
                position: function(b) {
                    return [b[0] + 10, b[1] - 10]
                }
            },
            legend: {
                top: "70%",
                itemWidth: 10,
                itemHeight: 10,
                data: ["汽车", "旅游", "财经", "教育", "软件", "其他"],
                textStyle: {
                    color: "rgba(255,255,255,.5)",
                    fontSize: "12",
                }
            },
            series: [{
                name: "兴趣分布",
                type: "pie",
                center: ["50%", "42%"],
                radius: ["40%", "60%"],
                color: ["#065aab", "#066eab", "#0682ab", "#0696ab", "#06a0ab", "#06b4ab", "#06c8ab", "#06dcab", "#06f0ab"],
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                data: [{
                    value: 2,
                    name: "汽车"
                }, {
                    value: 3,
                    name: "旅游"
                }, {
                    value: 1,
                    name: "财经"
                }, {
                    value: 4,
                    name: "教育"
                }, {
                    value: 8,
                    name: "软件"
                }, {
                    value: 1,
                    name: "其他"
                }, ]
            }]
        };
        a.setOption(option);
        window.addEventListener("resize", function() {
            a.resize()
        })
    }
});